import React, { Component } from 'react'
import { Link, Route } from 'react-router-dom'
import Detail from './Detail/Detail'
export default class Demo2 extends Component {
    state = {
        arr: [
            { id: '001', title: '消息1' },
            { id: '002', title: '消息2' },
            { id: '003', title: '消息3' },
        ]
    }
    replaceShow = () =>{
        this.props.history.replace('/home/demo2/detail',{id:'008',title:'99999'})
        // this.props.history.push({pathname:'/home/demo2/detail',state:{id:'008',title:'99999'}})
    }
    render() {
        let { arr } = this.state
        return (
            <div>
                <ul>
                    {
                        arr.map((v) => {
                            return (
                                <li key={v.id}>
                                    {/* <Link to={`/home/demo2/detail/${v.id}/${v.title}`}>{v.title}</Link> */}
                                    {/* <Link to={`/home/demo2/detail/?id=${v.id}&title=${v.title}`}>{v.title}</Link> */}
                                    <Link to={{pathname:'/home/demo2/detail',state:{id:v.id,title:v.title}}}>{v.title}</Link>
                                    <button onClick={this.replaceShow}>replace查看</button>
                                </li>
                            )
                        })
                    }
                </ul>
                <hr />
                <Route path="/home/demo2/detail/" component={Detail} />
            </div>
        )
    }
}
